<template>
  <div class="Echarts">
    <div :id="pos" style="width:195px; height:193px; "></div>
  </div>
</template>
<script>
  export default {
    mounted() {
      // console.log(this.data, this.total);
      // this.myEcharts()
    },
    data: {
      isShow: false
    },
    props: {
      data: {
        type: [String, Array],
        required: true
      },
      title: {
        type: [String, Number],
        required: true
      },
      pos:{
        type: String,
        required: true
      }
    },
    methods: {
      myEcharts(){
        let myColor = ['#E5BC8D','#17A4FA','#58E5B0','#9B6AE2'];

        let myChart = this.$echarts.init(document.getElementById(this.pos))
        var option = {
          tooltip: {
            trigger: 'item',
            backgroundColor: "#031026",
						borderColor: "#031026",
            formatter:function(params){
              // console.log(params);
              return `<span style=color:${params.color};font-size:15px;font-weight:bold>${params.name}</span><br/>
              <span style=color:#E0EDF9;font-size:15px;font-weight:400>个数：</span>
              <span style=color:#E0EDF9;font-size:15px;font-weight:400>${params.value}个</span><br>
              <span style=color:#E0EDF9;font-size:15px;font-weight:400>占比：</span>
              <span style=color:#E0EDF9;font-size:15px;font-weight:400>${(params.percent).toFixed(0)}%</span>`
            },      
          },
          color: myColor,
          title: [
          {
            text: this.title,
            x: '48%',
            top: '80%',
            textAlign: 'center',
            textStyle: {
              color: '#00D8FF',
              fontSize: 17,
              lineHeight: 22,
              fontWeight: 'bold',
            },
          }],
          legend: {
            show: false,
          },
          label: {
            show: false,
            position: 'outside',
            formatter: '{b}\n{d}%',
            color: '#CAD5E6',
            fontSize: 12,
            lineHeight: 17,
            borderWidth: 0,
            // padding: [-10,-23,0,0]
            padding:[0,-50,0,-50],
          },
          series: [{
            name: '',
            type: 'pie',
            // minAngle: 5,
            // minShowLabelAngle: 2,
            radius: ['33%', '45%'],
            center: ['48%', '44%'],
            clockwise: false,
            avoidLabelOverlap: false,
            // hoverAnimation:false,
            itemStyle: {
              borderColor: '#031026',
              borderWidth: 2
            },
            labelLine: {
              show: true,
              showAbove: false,
              length: 12,
              length2: 50
            },
            label:{
              show:false
            },
            data: this.data
          }]
        }
        myChart.on('click', params => {
          // 打印当前点击柱状的数据
          this.isShow = !this.isShow
          myChart.setOption({
            series:{
              label: {
                show: this.isShow
              },
              labelLine: {
                show: this.isShow
              }
            }
          })

        })
        myChart.clear()
        myChart.setOption(option)
      }
    },
    watch: {
      data: function(){
        this.myEcharts()
      }
    }
  }
</script>